<template>
  <div id="app">
    <h1>vue测试案例</h1>
    <div id="nav">
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">Home</router-link>|
      <router-link to="/insertVal">插值表达式</router-link>|
      <router-link to="/DemoVtext">v-text</router-link>|
      <router-link to="/DemoVbind">v-bind</router-link>|
      <router-link to="/DemoVif">v-if</router-link>|
      <router-link to="/DemoVfor">v-for</router-link>|
      <router-link to="/DemoVon">v-on</router-link>|
      <router-link to="/DemoVmodel">v-model</router-link>|
      <router-link to="/DemoVhtml">v-html</router-link>|
      <router-link to="/DemoVshow">v-show</router-link>|
      <router-link to="/DemoProps">DemoProps</router-link>|
      <router-link to="/DemoComputed">computed计算属性</router-link>|
      <router-link to="/DemoWatch">watch监听(侦听)属性</router-link>|
      <router-link to="/watchArrayList">watch监听arrayList</router-link>|

      <router-link to="/CountVfor">countVfor</router-link>|
      <router-link to="/TestDemo">uuidDemo</router-link>|
      <router-link to="/VforList">遍历list数组</router-link>
      <router-link to="/VueCookieTest">VueCookieTest</router-link>|
      <router-link to="/DemoLocalStorage">DemoLocalStorage</router-link>|
      <router-link to="/DemoRefCom">组件引用</router-link>|
      <router-link to="/DemoRoute">路由跳转1</router-link>|
      <router-link to="/TestRoute">路由跳转2</router-link>|
      <router-link to="/DemoGoBack">回退上一页</router-link>|
      <router-link to="/DemoVuex">DemoVuex</router-link>|
      <router-link to="/about">About</router-link>|

      <router-link to="/DemoAxios">AxiosDemo</router-link>|
      <router-link to="/TestAxios">TestAxios</router-link>|
      <router-link to="/toggleTest">vue过渡动画toggle</router-link>|
      <router-link to="/TimeOut">时钟TimeOut</router-link>|
      <router-link to="/DemoJq">使用jQuery</router-link>

      <router-link to="/LearnEs6Foreach">ES6使用array.foreach</router-link>|
      <router-link to="/arrayFilter">ES6使用array.filter</router-link>|
      <router-link to="/LearnEs6Map">ES6利用array.map方法抽取单列</router-link>|
      <router-link to="/es6Find">ES6利用array.find方法抽取单行</router-link>|
      <router-link to="/LearnEs6Set">ES6利用Set集合判重</router-link>

      <router-link to="/TestMn">9*9乘法表</router-link>|
      <router-link to="/LifeCycle">生命周期测试</router-link>|
      <router-link to="/TestEvent">vue事件修饰符</router-link>|
      <router-link to="/TestCalculator">计算器</router-link>|
      <router-link to="/KeepAliveTest">KeepAliveTest</router-link>|
      <router-link to="/TestLodash">TestLodash</router-link>|
      <router-link to="/TestStringUtil">TestStringUtil</router-link>|
      <router-link to="/Test3D">Test3D</router-link>

      <router-link to="/StyleTest">StyleTest</router-link>|
      <router-link to="/TestCssClass1">动态设置CSS类名</router-link>|
      <router-link to="/TestCssClass2">利用三元表达式切换CSS</router-link>|
      <router-link to="/TestCssClass3">利用数组设置CSS类名</router-link>|
      <router-link to="/TestCssClass4">利用method设置CSS类名</router-link>|
      <router-link to="/slot-test/parent">slot匿名插槽</router-link>|
      <router-link to="/slot-name-test/parent">slot具名插槽</router-link>|
      <router-link to="/slot-scope-test/parent">slot-scope作用域插槽</router-link>

      <router-link to="/com1Test">com1Test</router-link>|
      <router-link to="/display">$on测试</router-link>|
      <router-link to="/ImageTest">JS获取图片真实高度</router-link>|
      <router-link to="/TreeSelect">TreeSelect</router-link>|
      <router-link to="/TestRichEditor">TestRichEditor</router-link>|
      <router-link to="/TestMarkDownEditor">TestMarkDownEditor</router-link>|
      <router-link to="/TestVueCodemirror">TestVueCodemirror</router-link>|
      <router-link to="/TestDraggable">TestDraggable</router-link>|
      <router-link to="/TestVXE">vxe-table案例</router-link>|

      <router-link to="/TestRegion">TestRegion中国行政区划</router-link>|
      <router-link to="/TestIP">TestIP</router-link>|
      <router-link to="/TestBase64Pic">TestBase64Pic</router-link>|
      <router-link to="/TestImgChr">TestImgChr</router-link>|

      <router-link to="/Echarts">Echarts</router-link>|


    </div>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
}

/*#nav {*/
/*  padding: 30px;*/
/*}*/

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
